<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统访问数据概览与分析平台</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
    <script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f8fa 0%, #e6f0f5 100%);
            color: #333;
            min-height: 100vh;
            padding: 20px;
        }
        
        .header {
            background: linear-gradient(120deg, #1e88e5, #0d47a1);
            color: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 6px 15px rgba(13, 71, 161, 0.25);
            position: relative;
            overflow: hidden;
        }
        
        .header::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
            transform: rotate(30deg);
        }
        
        .header h1 {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
        }
        
        .header h1 i {
            margin-right: 15px;
            font-size: 32px;
        }
        
        .header p {
            font-size: 15px;
            opacity: 0.9;
            max-width: 600px;
        }
        
        .stats-row {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .stat-card {
            flex: 1;
            /*min-width: 200px;*/
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        }
        
        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
        }
        
        .stat-card:nth-child(1)::before { background: linear-gradient(90deg, #1e88e5, #0d47a1); }
        .stat-card:nth-child(2)::before { background: linear-gradient(90deg, #43a047, #2e7d32); }
        .stat-card:nth-child(3)::before { background: linear-gradient(90deg, #fb8c00, #f57c00); }
        .stat-card:nth-child(4)::before { background: linear-gradient(90deg, #ab47bc, #8e24aa); }
        
        .stat-card .value {
            font-size: 36px;
            font-weight: 700;
            margin: 10px 0 5px;
        }
        
        .stat-card:nth-child(1) .value { color: #1e88e5; }
        .stat-card:nth-child(2) .value { color: #43a047; }
        .stat-card:nth-child(3) .value { color: #fb8c00; }
        .stat-card:nth-child(4) .value { color: #ab47bc; }
        
        .stat-card .label {
            font-size: 15px;
            color: #666;
            display: flex;
            align-items: center;
            font-weight: 500;
        }
        
        .stat-card .label i {
            margin-right: 8px;
            font-size: 18px;
        }
        
        .stat-card .trend {
            font-size: 13px;
            margin-top: 8px;
            font-weight: 500;
        }
        
        .charts-row {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .chart-container {
            flex: 1;
            min-width: 300px;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        
        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .chart-header h2 {
            font-size: 18px;
            font-weight: 600;
        }
        
        .chart-header .time-range {
            font-size: 13px;
            color: #666;
        }
        
        .chart-content {
            height: 250px;
        }
        
        .filters {
            background: white;
            border-radius: 12px;
            padding: 15px 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .filter-group {
            display: flex;
            align-items: center;
        }
        
        .filter-group label {
            margin-right: 10px;
            font-weight: 500;
            color: #555;
            font-size: 14px;
        }
        
        .filter-group select {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background: #f9fbfd;
            font-size: 14px;
            min-width: 150px;
        }
        
        .filter-group button {
            background: linear-gradient(120deg, #1e88e5, #0d47a1);
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
            font-size: 14px;
        }
        
        .filter-group button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(13, 71, 161, 0.3);
        }
        
        .footer {
            text-align: center;
            color: #666;
            padding: 15px;
            font-size: 13px;
            margin-top: 10px;
        }
        
        @media (max-width: 1200px) {
            .stat-card {
                min-width: calc(50% - 15px);
            }
            
            .chart-container {
                min-width: 100%;
            }
        }
        
        @media (max-width: 768px) {
            .stat-card {
                min-width: 100%;
            }
            
            .filters {
                flex-direction: column;
            }
            
            .filter-group {
                width: 100%;
            }
            
            .filter-group select {
                width: 100%;
            }
        }
    </style>
</head>
<body>


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>访问日志分析</legend>
</fieldset>
<div class="layui-bg-gray" style="padding: 0px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="stats-row">
                        <div class="stat-card">
                            <div class="label"><i class="layui-icon layui-icon-log"></i> 总访问量</div>
                            <div class="value">12,847</div>
                            <div class="trend">
                                <span style="color:#4caf50;">↑ 12.5%</span> 较上月
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="label"><i class="layui-icon layui-icon-user"></i> 访问用户数</div>
                            <div class="value">38</div>
                            <div class="trend">
                                <span style="color:#4caf50;">↑ 5.6%</span> 较上月
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="label"><i class="layui-icon layui-icon-date"></i> 本月访问量</div>
                            <div class="value">3,284</div>
                            <div class="trend">
                                日均 <span style="color:#1e88e5;">109.5</span> 次
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="label"><i class="layui-icon layui-icon-time"></i> 平均访问时长</div>
                            <div class="value">4.8<span style="font-size:18px;">秒</span></div>
                            <div class="trend">
                                <span style="color:#f44336;">↓ 0.7%</span> 较上月
                            </div>
                        </div>
                    </div>

                    <div class="charts-row">
                        <div class="chart-container">
                            <div class="chart-header">
                                <h2>按月访问趋势分析</h2>
                                <div class="time-range">2024年1月 - 2025年6月</div>
                            </div>
                            <div class="chart-content" id="monthlyChart"></div>
                        </div>

                        <div class="chart-container">
                            <div class="chart-header">
                                <h2>按日访问趋势分析</h2>
                                <div class="time-range">2025年6月1日 - 2025年6月9日</div>
                            </div>
                            <div class="chart-content" id="dailyChart"></div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>




    <script>
        layui.use(['layer', 'form'], function(){
            var layer = layui.layer;
            var form = layui.form;
            
            // 初始化ECharts图表
            var monthlyChart = echarts.init(document.getElementById('monthlyChart'));
            var dailyChart = echarts.init(document.getElementById('dailyChart'));
            
            // 按月访问量数据
            var monthlyOption = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255,255,255,0.95)',
                    borderWidth: 1,
                    borderColor: '#eee',
                    textStyle: {
                        color: '#333'
                    },
                    axisPointer: {
                        type: 'shadow',
                        shadowStyle: {
                            color: 'rgba(30, 136, 229, 0.1)'
                        }
                    },
                    formatter: function(params) {
                        return params[0].name + '<br/>访问量: ' + params[0].value + ' 次';
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06', 
                           '2024-07', '2024-08', '2024-09', '2024-10', '2024-11', '2024-12',
                           '2025-01', '2025-02', '2025-03', '2025-04', '2025-05', '2025-06'],
                    axisLine: {
                        lineStyle: {
                            color: '#999'
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 45
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '访问量',
                    nameTextStyle: {
                        color: '#666',
                        padding: [0, 0, 0, 40]
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#999'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#f0f0f0'
                        }
                    }
                },
                series: [{
                    name: '访问量',
                    type: 'bar',
                    data: [845, 932, 901, 934, 1290, 1330, 1320, 1560, 1595, 1480, 1620, 1760, 1890, 1820, 1960, 2140, 2380, 1980],
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#1e88e5' },
                            { offset: 1, color: '#0d47a1' }
                        ]),
                        borderRadius: [5, 5, 0, 0]
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowColor: 'rgba(13, 71, 161, 0.5)'
                        }
                    },
                    barWidth: '60%'
                }],
                dataZoom: [{
                    type: 'inside',
                    start: 70,
                    end: 100
                }]
            };
            
            // 按日访问量数据
            var dailyOption = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255,255,255,0.95)',
                    borderWidth: 1,
                    borderColor: '#eee',
                    textStyle: {
                        color: '#333'
                    },
                    axisPointer: {
                        type: 'line',
                        lineStyle: {
                            color: '#1e88e5',
                            width: 2,
                            type: 'solid'
                        }
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['06-01', '06-02', '06-03', '06-04', '06-05', '06-06', '06-07', '06-08', '06-09'],
                    axisLine: {
                        lineStyle: {
                            color: '#999'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '访问量',
                    nameTextStyle: {
                        color: '#666',
                        padding: [0, 0, 0, 40]
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#999'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#f0f0f0'
                        }
                    }
                },
                series: [{
                    name: '访问量',
                    type: 'line',
                    data: [325, 310, 298, 365, 412, 380, 395, 478, 315],
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 6,
                    lineStyle: {
                        width: 3,
                        color: '#ff9800'
                    },
                    itemStyle: {
                        color: '#ff9800',
                        borderWidth: 2,
                        borderColor: '#fff'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(255, 152, 0, 0.5)' },
                            { offset: 1, color: 'rgba(255, 152, 0, 0.1)' }
                        ])
                    },
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    }
                }]
            };
            
            // 渲染图表
            monthlyChart.setOption(monthlyOption);
            dailyChart.setOption(dailyOption);
            
            // 窗口大小变化时重新调整图表大小
            window.addEventListener('resize', function() {
                monthlyChart.resize();
                dailyChart.resize();
            });
            

        });
    </script>
</body>
</html>